<template>
  <div>
    <h3>日期选择案例</h3>
    <div class="date">
        <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">选择今天之前的日期</span>
            <el-date-picker
            v-model="value4"
            type="date"
            :picker-options="pickerDateOptions.pickerOptions1"
            placeholder="选择日期">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">带快捷选项</span>
            <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerDateOptions.pickerOptionsCircle">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">日期范围</span>
            <el-date-picker
            v-model="value3"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerDateOptions.pickerOptionsDay">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">月份范围</span>
            <el-date-picker
                v-model="value5"
                type="monthrange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                :picker-options="pickerDateOptions.pickerOptionsMonth">
                </el-date-picker>
        </div>
    </div>
    <div class="markdown-body">
      <dateTemplateMD></dateTemplateMD>
    </div>
  </div>
</template>

<script>
  import pickerOptions from "@/assets/js/pickerOptions"
  import dateTemplateMD from "../md/dateTemplateMD.md"

  export default {
    components:{
      dateTemplateMD,
    },
    data() {
      return {
        pickerDateOptions:pickerOptions,
        value4:"",
        value1: '',
        value2: '',
        value3:"",
        value5:"",
      };
    }
  };
</script>
<style >
.date{
    text-align: left;
}
.block{
    margin-top: 20px;
}
.demonstration{
    display: inline-block;
    width: 200px;
    text-align: right;
    margin-right: 10px;
}
</style>